<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="流程KEY" prop="key">
        <el-input
          v-model="queryParams.key"
          placeholder=""
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="实例名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder=""
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
    >

      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="id" label="实例ID" width="180"/>
      <el-table-column prop="name" label="实例名称" width="110"/>
      <el-table-column prop="processDefinitionId" label="流程定义编号"/>
      <el-table-column prop="processDefinitionKey" label="流程定义KEY"/>
      <el-table-column prop="processDefinitionVersion" label="版本"/>
      <el-table-column prop="status" label="状态"/>
      <el-table-column prop="startDate" label="实例创建时间"/>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button v-show="scope.row.status ==='RUNNING'" type="text" @click="suspend(scope.row)">挂起</el-button>
          <el-button v-show="scope.row.status ==='SUSPENDED'" type="text" @click="suspend(scope.row)">激活</el-button>
          <el-button type="text" @click="historyFind(scope.row)">历史</el-button>
          <el-button v-show="scope.row.status !=='END'" type="text" @click="removeData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      style="padding: 30px 0; text-align: right;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <el-dialog
      :visible.sync="modelVisible"
      title="流程图"
      width="1500px"
      append-to-body
      @close="modelCancel"
    >
      <div style="position:relative;height: 100%;">
        <iframe
          id="iframe"
          :src="modelerUrl"
          frameborder="0"
          width="100%"
          height="700px"
          scrolling="auto"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api/act/instances'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      listLoading: false, // 数据是否正在加载
      list: null, // 列表
      total: 0, // 数据库中的总记录数
      pageNum: 1,
      pageSize: 10,
      showSearch: true,
      queryParams: {
        key: '',
        name: ''
      },

      modelVisible: false,
      modelerUrl: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {

    handleQuery() {
      this.fetchData()
    },
    resetQuery() {
      this.queryParams = {}
      this.handleQuery()
    },
    fetchData(pageNum = 1) {
      this.pageNum = pageNum

      api.getPageList(this.pageNum, this.pageSize, this.queryParams).then(response => {
        this.list = response.data.listMap
        this.total = response.data.total
      })
    },
    modelCancel() {
      this.getList()
    },
    suspend(row) {
      const par = { id: row.id, instanceId: row.instanceId }
      if (row.status === 'RUNNING') {
        api.suspendInstance(par).then(res => {
          if (res.code === 200) {
            this.$message.success('挂起成功')
            this.fetchData()
          }
        })
      } else if (row.status === 'SUSPENDED') {
        api.resumeInstance(par).then(res => {
          if (res.code === 200) {
            this.$message.success('激活成功')
            this.fetchData()
          }
        })
      }
    },

    historyFind(data) {
      this.modelVisible = true
      localStorage.setItem('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
      localStorage.setItem('token', getToken())
      this.modelerUrl = '/bpmnjs/index.html?type=lookBpmn&instanceId=' + data.instanceId + '&deploymentId=' + data.deploymentId + '&deploymentName=' + encodeURI(data.resourceName)
    },
    removeData(row) {
      const par = { id: row.id, instanceId: row.instanceId }
      api.removeData(par).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.fetchData()
        }
      })
    }

  }
}
</script>
